// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/callout';
@import '~@mozilla-protocol/core/protocol/css/components/breadcrumb';

.feature-article-container {
    padding-top: $spacing-2xl;
    position: relative;

    &::before {
        background: url('/media/img/firefox/features/article-header.svg') center top no-repeat;
        background-size: cover;
        content: '';
        display: block;
        height: 50vh;
        max-height: 800px;
        min-height: 250px;
        position: absolute;
        top: 0;
        width: 100%;
    }

    & > .mzp-l-content {
        padding: 0;
    }

    @media #{$mq-md} {
        padding-top: $layout-xl;
    }
}

.feature-article {
    background-color: $color-white;
    box-sizing: border-box;
    padding: $spacing-lg;

    & > .mzp-c-article-title {
        border-bottom: 1px solid $color-marketing-gray-30;
        margin-bottom: 0.75em;
        padding-bottom: 0.5em;
        position: relative;
    }

    & > .mzp-c-callout {
        margin: $spacing-lg 0;
        padding: $spacing-lg;
    }

    & > .c-article-figure {
        margin: $spacing-lg 0;
        text-align: center;

        img {
            border: 1px solid $color-marketing-gray-30;
        }

        figcaption {
            font-style: italic;
        }
    }

    h2 {
        @include text-title-xs;
        margin-top: $layout-sm;
    }

    h3 {
        @include text-title-2xs;
    }

    .c-lang-list {
        columns: 2;
        column-gap: $spacing-lg;
    }

    .footnote {
        @include text-body-sm;
    }

    @media #{$mq-md} {
        padding: $spacing-2xl;

        & > .mzp-c-callout {
            margin: $spacing-xl ($spacing-2xl * -1);
            padding: $spacing-xl $spacing-2xl;
        }

        .c-lang-list {
            columns: 3;
        }

    }
}

.c-firefox-midpage-cta {
    text-align: center;
    margin-top: $spacing-2xl;
}

.is-firefox .hide-from-firefox {
    display: none;
}
